<template>
  <div class="page">
    <div class="handlePart">
      <el-form :inline="true" :model="form">
        <el-form-item label="名称：">
          <el-input size="small" v-model="form.keywords" placeholder="请输入名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="创建日期：">
          <el-date-picker size="small" v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
          <el-button size="small" type="danger" icon="el-icon-delete" @click="dels">删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tablePart">
      <el-table :data="list" :height="'calc(100vh - 240px)'" stripe style="width: 100%"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="id"
        @selection-change="handleSelectionChange" :expand-row-keys="expandRowKeys">
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- <el-table-column label="序号" type="index" align="center" width="55">
        </el-table-column> -->
        <el-table-column prop="orgName" label="部门名称">
        </el-table-column>
        <el-table-column prop="orgCode" label="部门编号" align="center">
        </el-table-column>
        <el-table-column prop="orgNamePath" label="上下级关系" align="center">
        </el-table-column>
        <el-table-column prop="manager" label="负责人" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" align="center"> </el-table-column>
        <el-table-column label="单位简介" align="center">
          <template slot-scope="scope">
            <div class="ellipsis" :title="scope.row.description">{{ scope.row.description }}</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="90">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" title="编辑" @click="edit(scope.row)"></el-button>
            <el-button type="text" icon="el-icon-delete" title="删除" @click="del(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <EditDialog ref="editDialogRef" @listInit="listInit" />
  </div>
</template>
<script>
import EditDialog from './editDialog.vue';

export default {
  data() {
    return {
      form: {
        keywords: '',
        end: '',
        start: ''
      },
      date: [],
      list: [],
      selectList: [],
      expandRowKeys: []
    };
  },
  mounted() {
    this.listInit();
  },
  methods: {
    listInit(expandRowKeys) {
      if (this.date && this.date.length) {
        this.form.start = this.date[0]
        this.form.end = this.date[1]
      } else {
        this.form.start = ''
        this.form.end = ''
      }
      this.$api.getOrganManageList(this.form).then((res) => {
        if (res && res.code == 200) {
          let data = res.data || []
          this.list = data
          if (expandRowKeys) {
            this.expandRowKeys = expandRowKeys
          } else {
            this.expandRowKeys = [this.list[0].id]
          }

        }
      })
    },
    // 查询
    search() {
      this.listInit()
    },
    // 新增
    add() {
      this.$refs.editDialogRef.showModal('add');
    },
    // 编辑
    edit(row) {
      this.$refs.editDialogRef.showModal('edit', row);
    },
    // 查看
    view(row) {
      this.$refs.editDialogRef.showModal('view', row);
    },
    // 删除
    del(row) {
      this.$confirm('数据删除后将无法恢复，确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.delOrganManage([row.sysOrganizationId]).then(res => {
          if (res && res.code == 200) {
            this.$notify.success({
              title: '成功',
              message: '删除成功!'
            });
            this.listInit()
          }
        })
      }).catch(() => { });
    },
    // 批量删除
    dels() {
      if (this.selectList.length == 0) {
        this.$notify.warning({
          title: '警告',
          message: '请至少选择一条数据！'
        });
        return
      }
      let ids = []
      this.selectList.forEach(l => {
        ids.push(l.sysOrganizationId)
      })
      this.$confirm('数据删除后将无法恢复，确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.delOrganManage(ids).then(res => {
          if (res && res.code == 200) {
            this.$notify.success({
              title: '成功',
              message: '删除成功!'
            });
            this.listInit()
          }
        })
      }).catch(() => { });
    },
    // 多选
    handleSelectionChange(val) {
      this.selectList = val;
    },
  },
  components: { EditDialog }
};
</script>
